<template>
  <div style="width: 100%;height: 100%;margin: 0;padding: 0">
    <div class="pane_name">
      <span>二三维显示</span>
      <button class="pane_close" @click="close"></button>
    </div>
    <div class="pane_content">
      <div class="pane_item">
            <span class="pane_item_name">
                二三维分屏联动
            </span>
        <div class="on_off">
          <input type="checkbox" id="And2D3D" />
          <label for="And2D3D" class="button-label">
            <span class="circle"></span>
          </label>
        </div>
      </div>
      <div class="pane_item">
              <span class="pane_item_name">
                  三维卷帘显示
              </span>
        <div class="on_off">
          <input type="checkbox" id="Only3D" />
          <label for="Only3D" class="button-label1">
            <span class="circle1"></span>
          </label>
        </div>
      </div>
      <div class="pane_item">
            <span class="pane_item_name">
                二三维联动显示
            </span>
        <div class="on_off">
          <input type="checkbox" id="Togehter" />
          <label for="Togehter" class="button-label2">
            <span class="circle2"></span>
          </label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "setting-pane",
    methods:{
      close:function(){
        this.$emit('closePane',false);
      }
    }
  }
</script>

<style scoped>
  .pane_name {
    border:1px #38535e solid;
    border-radius:2px;
    height:30px;
    line-height:30px;
    color:#ffffff;
    font-size:14px;
    text-indent:10px;
  }
  .pane_close {
    float:right;
    margin:9px;
    width:10px;
    height:10px;
    background:url(../../../static/IMG/leftsider/取消.png) center no-repeat;
    border:none;
    cursor:pointer;
    outline: none;
  }
  .pane_item {
    height:40px;
    line-height:40px;
    text-indent:10px;
  }
  .pane_item_name {
    font-size:14px;
    color:#ffffff;
  }
  .on_off {
    float:right;
    margin-right:10px;
  }
  /*开关样式*/
  #And2D3D,
  #Only3D,
  #Togehter{
    display: none;
  }
  .button-label,
  .button-label1,
  .button-label2{
    position: relative;
    display: inline-block;
    width: 30px;
    height: 15px;
    background-color: #ccc;
    box-shadow: #ccc 0px 0px 0px 2px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
  }
  .circle,
  .circle1,
  .circle2{
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
  }
  .button-label .circle,
  .button-label1 .circle1,
  .button-label2 .circle2{
    left: 0;
    transition: all 0.3s;
  }
  #And2D3D:checked + label.button-label .circle,
  #Only3D:checked + label.button-label1 .circle1,
  #Togehter:checked + label.button-label2 .circle2{
    left: 14px;
  }
  #And2D3D:checked + label.button-label,
  #Only3D:checked + label.button-label1,
  #Togehter:checked + label.button-label2{
    background-color: #51ccee;
  }
</style>
